<template>
    <div class="login">
        <div class="box">
            <div class="title">欢迎登录 - {{ merInfo.merName }}</div>
            <a-form>
                <div class="input">
                    <span>商户：{{ merNo }}</span>
                    <div>
                        <!-- <a-input class="innerput" v-model:value="merNo" placeholder="请输入商户号" @keydown.enter.native="login" readonly></a-input> -->
                    </div>
                </div>
                <div class="input">
                    <span>账号：</span>
                    <div>
                        <a-input class="innerput" v-model:value="account" placeholder="请输入账号" @keydown.enter.native="login"></a-input>
                    </div>
                </div>
                <div class="input">
                    <span>密码：</span>
                    <div>
                        <a-input-password class="innerput" v-model:value="password" autocomplete="" placeholder="请输入密码" @keydown.enter.native="login"></a-input-password>
                    </div>
                </div>
                <div class="input verify_code">
                    <span>验证码：</span>
                    <div class="flex-v-center">
                        <a-input class="innerput" style="width: 150px;" v-model:value="imgCode" placeholder="验证码" @keydown.enter.native="login"></a-input>
                        <img class="mar-l20 w80" v-if="verifyCode" :src="verifyCode" alt="">
                        <div class="change" @click="refreshCodeImg">
                            <i class="icon-refresh"></i>
                            <em>换一张</em>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <a-button class="wfull" type="primary" @click="login"> 登录 </a-button>
                </div>
            </a-form>
        </div>
        <ul class="login-bg-bubbles">
            <li v-for="(n, index) in bubbles" :key="index" :style="n"></li>
        </ul>
    </div>
</template>

<script lang="jsx" setup>
    import { ref, onMounted, computed, nextTick } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { useStore } from 'vuex'
    import { message } from 'ant-design-vue';
    import md5 from 'js-md5'
    import { userLogin, getLoginId } from '@/api/user'
    import { getUserSysPers } from '@/api/system'
    import  { encrypt, decrypt } from '@/utils/crypto'
    import apiList from '@/api/apiList'



    let Router = useRouter()
    let Route = useRoute()
    let Store = useStore()

    const account = ref('')
    const password = ref('')
    const imgCode = ref('')
    const merNo = ref('')
    const merInfo = ref({})
    const verifyCode = computed(() => {
        if(merInfo.value.loginId && tempShowCodeImg.value) {
            return apiList.baseUrl + apiList.user.getLoginCode + '?loginId=' + merInfo.value.loginId + '&time=' + new Date().getTime()
        } else {
            return ''
        }
    })

    const tempShowCodeImg = ref(true)
    const refreshCodeImg = () => {
        tempShowCodeImg.value = false
        setTimeout(() => {
            tempShowCodeImg.value = true
        }, 0)
    }


    onMounted(async () => {

        // let loginKey = 'a88687ddcc6e42dc801de6ec6fd08f82'
        // let dateStr = 'a88687ddcc6e42dc801de6ec6fd08f82'
        // let key = md5(loginKey).slice(0, 16)
        // let iv = md5(dateStr).slice(-16)
        // let txt = 'asdfasdfasdfasdf'

        // let _txt = encrypt(txt, key, iv)
        // console.log(_txt);
        // _txt = 'BTCXDJ9luyPuPZtEzp411gT4mK6j4UBWWba1L9b85tDrOuRXEMGtvrYYssD7r5LwfnfwNPgwXEWu8tQLI3Ds0hQM/t45e53oWw78lI3fUgBdE7q0FJlRxsNbY3fgMpBeNCR+ZrUD+/65tcotlzjEESk38xoD3sdL+9/NgRf75u5yKIjWhZnhb14lEO3S8L38/8Ozvy9AfZUgjhs87feaYsRxT1+QeeSNBUUEfYoGlNI/VvIjf7sd0B/BriX1Igi+5K6DFqLDc5GDd4szGHW6bXZvfA6FNT06TP8xP3NiFguuGz+k+sQaYcNmqqgW00e2tN8yvE03Ld3vStsUPeVQx+Tx51CZCMqAGQtY4OOqsNmYm02uHr8rQEJfU6NaSfs9PDcA0OqSI3s1UgsxkA3I7cQtnth6JiFyrNpHl08X3SERDTj33CfhxZJoECYq5pp+oDck4lN1+SAc/tetL0/N2w3c1XYnfOhpaNv+Z/IS/8a8nyQIBhFeP3Y6XbqdQqd4UF8gyv3yc0b6RZ85FSkP5ueYfy4qBRnQIkf972Kcy7nt3XpimE6ZwP+EnMLIWksPi4X1AxVMKoi0Aui76vT3Zw=='
        // let _txt2 = decrypt(_txt, iv, key)
        // console.log(_txt2);





        if(Route.params.merNo) {
            merNo.value = Route.params.merNo
        } else {
            merNo.value = localStorage.merNo || ''
        }
        account.value = localStorage.loginAccount || ''
        initBubbles()
        await getLoginMustData()
    })

    const bubbles = ref([])
    function initBubbles() {
        let bubb = []
        const randomNum = (min, max) => {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        for(let i = 0; i < 30; i++) {
            let width = randomNum(10, 160) +'px'
            bubb.push({
                left: randomNum(5, 95) + '%',
                width: width,
                height: width,
                'animation-delay': randomNum(0, 30) + 's',
                'animation-duration': randomNum(10, 40) + 's',
                'background-color': 'rgba(255,255,255,.' + randomNum(15, 40) + ')',
            })
        }
        bubbles.value = bubb
    }



    function getLoginMustData () {
        return getLoginId({
            merNo: merNo.value
        }).then(res => {
            merInfo.value = res.data
        })
    }



    function login() {
        console.log(typeof password.value);
        if(!merNo.value) return $global.message.error({ content: '请输入商户号'})
        if(!account.value) return message.error({ content: '请输入账号'})
        if(!password.value) return message.error({ content: '请输入密码'})
        if(!imgCode.value) return message.error({ content: '请输入验证码'})
        let loginData = JSON.stringify({
            userAccount: account.value,
            merNo: merNo.value,
            userPwd: md5(password.value),
            imgCode: imgCode.value
        })
        console.log(md5(merInfo.value.loginKey).slice(0, 16));
        console.log(md5(merInfo.value.dateStr).slice(-16));
        loginData = encrypt(
            loginData,
            md5(merInfo.value.loginKey).slice(0, 16),
            md5(merInfo.value.dateStr).slice(-16)
        )
        userLogin({
            loginId: merInfo.value.loginId,
            loginData: loginData,

        }).then(async res => {
            console.log(res.data);
            let data = decrypt(
                res.data,
                md5(merInfo.value.dateStr).slice(-16),
                md5(merInfo.value.loginKey).slice(0, 16),
            )
            if (data.simpleName) {
                document.title = res.data.simpleName + '-' + res.data.merNo
            }

            localStorage.loginAccount = account.value
            localStorage.merNo = merNo.value
            Store.commit('user/SET_USER_ACCOUNT', data)
            localStorage.account = md5(merInfo.value.loginKey).slice(0, 16).toUpperCase() +  res.data + md5(merInfo.value.dateStr).slice(-16).toUpperCase()

            await getPowerList()
            Router.replace('/')
        }, err => {
            console.log(err.code);
            if(err.code == -2) {
                refreshCodeImg()
            }
        })
    }

    function getPowerList() {
        return new Promise((resolve, reject) => {
            let childPerRes = getUserSysPers({
                // menuFlag: '00'
            }).then(res => {
                Store.commit('control/SET_POWER_LIST', res.data)
                resolve()
            })
        })
    }
</script>


<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom right, #48a4ff 0%, #1b8cfd 100%);
    .align(center);
    opacity: .8;
    .box{
        width: 400px;
        // height: 300px;
        background: #fff;
        border-radius: 10px;
        padding: 10px 20px 20px 20px;
        position: relative;
        z-index: 1000;
        .title{
            line-height: 50px;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .input{
            margin-top: 10px;
            span {
                line-height: 30px;
            }
            .innerput {
                width: 100%;
            }
        }
        .verify_code{
            img{
                width: 100px;
                height: 32px;
            }
            .change{
                margin-left: 10px;
                font-size: 12px;
                color: #1b8cfd;
                cursor: pointer;
                position: relative;
                top: 2px;
                i{
                    margin-right: 5px;
                }
            }
        }

        .btn{
            margin-top: 25px;
        }
    }
}



.login-bg-bubbles {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    li {
        position: absolute;
        bottom: -160px;
        width: 40px;
        height: 40px;
        background-color: rgba(255,255,255,.2);
        animation: loginSquare 25s infinite;
        transition-timing-function: linear;
    }
}

@keyframes loginSquare {
    0% { transform: translateY(0); }
    100% { transform: translateY(-120vh) rotate(600deg); }
}

</style>
